<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>只使用flash上传的demo</title>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
</head>
<body>
<h2>只使用flash上传的demo</h2>
<div class="grid">

    <input class="g-u" id="J_UploaderBtn" name="Filedata" type="image-uploader" value="上传图片"
           action="upload.php" urlsInputName="imageUrls" max="3" maxSize="500">

    <!--用来存放服务器端返回的图片路径，多个图片以逗号隔开-->
    <input type="hidden" name="imageUrls">
</div>
<ul id="J_UploaderQueue" class="grid">

</ul>
<div class="btn-wrapper">
    <input value="1" type="checkbox" class="J_Field" id="J_AutoUpload" checked> <label>自动上传</label>
    <input value="1" type="checkbox" class="J_Field" id="J_Multiple" checked> <label>多选上传</label>
    <input value="1" type="checkbox" class="J_Field" id="J_UploadDisabled"> <label>禁用上传按钮</label>
    <input value="1" type="checkbox" class="J_Field" id="J_FileFilters"> <label>只允许上传png图片</label>
</div>
<p>flash上传在chrome和firefox下可能存在session丢失的问题，建议在基于webkit的浏览器下使用ajax上传</p>
 <h2>测试ImageUploader和Uploader的共存问题</h2>
<a id="J_UploaderBtn2" class="uploader-button" href="#"> 选择要上传的文件 </a>
<!-- 文件上传队列 -->
<ul id="J_UploaderQueue2">

</ul>
<script>
    var S = KISSY;
    //包路径，实际使用请直接配置为"http://a.tbcdn.cn/s/kissy/"
    var path = S.Config.debug && "../../../../../../" || "http://a.tbcdn.cn/s/kissy/";
    S.config({
        packages:[
            {
                name:"gallery",
                path:path,
                charset:"utf-8"
            }
        ]
    });
    //加载上传组件入口文件
    KISSY.use('gallery/form/1.3/uploader/imageUploader', function (S, ImageUploader) {
        var flashUploader = new ImageUploader('#J_UploaderBtn', '#J_UploaderQueue',{
            // 上传方式切成flash
            type : "flash",
            //手动控制flash的尺寸
            swfSize:{"width":200,"height":25}
        });
        flashUploader.on('render', function (ev) {
            var $ = S.Node.all;
            var Event = S.Event;
            //上传组件实例
            var uploader = ev.uploader;
            //上传按钮实例
            var button = uploader.get('button');

            //flash准备完毕需要一定的时间，所以想对flash进行操作最好监听render事件
            button.on('render', function () {
                //触发多选框的change事件，改变组件配置
                Event.fire('.J_Field', 'change');
            });

            $('#J_AutoUpload').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                uploader.set('autoUpload', checked);
            });
            $('#J_UploadDisabled').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                button.set('disabled', checked);
            });
            $('#J_Multiple').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                button.set('multiple', checked);
            });
            $('#J_FileFilters').on('change', function (ev) {
                var checked = $(ev.target).prop('checked');
                if (checked) {
                    uploader.set('allowExts','png');
                } else {
                    uploader.set('allowExts','jpg,jpeg,png,gif,bmp');

                }
            });
        });
        flashUploader.render();
    });

    KISSY.use('gallery/form/1.3/uploader/index', function (S, RenderUploader) {
        new RenderUploader('#J_UploaderBtn2', '#J_UploaderQueue2',{
            type:'flash',
            //服务器端配置
            serverConfig:{
                //处理上传的服务器端脚本路径
                action:"upload.php"
            },
            // 文件域
            name:"Filedata",
            //用于放服务器端返回的url的隐藏域
            urlsInputName:"fileUrls"
        });
    })
</script>
</body>
</html>
